<template>
	<div class="culatorBox" ref="culatorBox">
        <div class="mianBox" v-for="(list, k) in talkList" :key="k">
            <div 
				v-for="(item, index) in list" :key="index">
                <div :class="[{ user: item.identity == 'user' && !base.isMobile }, { wapuser: base.isMobile }, 'quesBox clearfix']" v-if="item.identity == 'user'">
                    <div :class="[{ user: !base.isMobile }, { system: base.isMobile }, 'userPic']">
                        <img v-if="useStore?.avatar" :src="`${baseurl}${useStore?.avatar}`" />
                        <img v-else :src="`${imgurl}pic.jpg`" />
                    </div>

                    <div class="quertitle jsq" >
                        {{ item.content }}
                    </div>
                </div>
                <div v-else>
                    <div class="culator" v-if="item.jsgsData.title">
                        <div class="userPic system">
                            <img :src="`${imgurl}systempic.png`" />
                        </div>
                        <div class="counter">
                            <div class="js-calculator">
                                <div class="js-top">
                                    <img :src="`${baseurl}${item.jsgsData.thumb}`" class="js_class_img" alt="" />
                                    <div class="js_tit">
                                        <p>{{ item.jsgsData.title }}</p>
                                        <span>
                                            <img :src="`${imgurl}jsgs.png`" alt="" v-if="!isMobileValue" />重量 =
                                            {{ item.jsgsData.formula }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="js_content" v-if="item.jsgsData.fields.length > 0">
                                <div class="js_ul">
                                    <ul>
                                        <li v-for="(items, index) in item.jsgsData.fields" :key="index">
                                            <p>{{ items.fieldname }}:</p>
                                            <div class="inputdiv">
                                                <input type="number" v-model="items.value" disabled/>
                                                <span :class="items.value ? 'isValue' : ''">{{ items.unit }}</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="js_result" v-if="isMobileValue">
                                    <div class="js_result_num">
                                        <p class="res_tit">重量：</p>
                                        <p class="res_num">
                                            <span>{{ items.jsjieguo ? items.jsjieguo : 0 }}</span>公斤
                                        </p>
                                    </div>
                                    <div class="js_btns">
                                        <button class="btnProduct" @click="addChoose">
                                            <img :src="`${imgurl}icon_xuanze.png`" alt="" />
                                            产品选择
                                        </button>
                                    </div>
                                </div>
                                <div class="js_result" v-else>
                                    <div class="js_btns">
                                        <button class="btnProduct" @click="addChoose">
                                            <img :src="`${imgurl}icon_xuanze.png`" alt="" />
                                            产品选择
                                        </button>
                                    </div>
                                    <div class="js_result_num">
                                        <p class="res_tit">重量：</p>
                                        <p class="res_num">
                                            <span>{{ item.jsjieguo ? item.jsjieguo : 0 }}</span>公斤
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
		<div class="main_culat" v-if="isNohistory" v-for="(items, indexs) in mainData" :key="indexs">
			<div class="culator">
				<div class="userPic system">
					<img :src="`${imgurl}systempic.png`" />
				</div>
				<div class="counter">
					<div class="usetit">使用：丝网计算器</div>
					<div class="introduce">
						以下是为您推荐的常规丝网产品，请选择类型进行计算：
					</div>
					<div class="wireList clearfix">
						<div class="searchBox">
							<input class="serInput" placeholder="请输入关键词" v-model="keyword" type="text"/>
							<span class="btnser show" @click="serchList(indexs)">搜索</span>
						</div>
						<div class="wireBox">
							<ul>
								<li v-for="(item, index) in items.data" :key="index" @click="items.jsgsData.title ? '' : changeData(indexs, index)"
									:class="index == items.currIndex ? 'curindex' : ''">
									<span class="imgT">
										<img :src="`${baseurl}${item.thumb}`" />
									</span>
									<span class="tit">{{ item.title }}</span>
								</li>
							</ul>
						</div>
						
					</div>
					<div class="sureJS">
						<!-- <button @click="add(indexs, items.currIndex)">
              <img :src="`${imgurl}jsq.png`" alt="" />
              确认并开始计算
            </button> -->
						<button @click="add(indexs, items.currIndex)" v-if="items.btnStatus">
							<img :src="`${imgurl}jsq.png`" alt="" />
							确认并开始计算
						</button>
						<button class="noBtn" v-else>
							<img :src="`${imgurl}jsq.png`" alt="" />
							确认并开始计算
						</button>
					</div>
				</div>
			</div>

			<div class="culator" v-if="items.jsgsData.title">
				<div class="userPic system">
					<img :src="`${imgurl}systempic.png`" />
				</div>
				<div class="counter">
					<div class="js-calculator">
						<div class="js-top">
							<img :src="`${baseurl}${items.jsgsData.thumb}`" class="js_class_img" alt="" />
							<div class="js_tit">
								<p>{{ items.jsgsData.title }}</p>
								<span>
									<img :src="`${imgurl}jsgs.png`" alt="" v-if="!isMobileValue" />重量 =
									{{ items.jsgsData.formula }}</span>
							</div>
						</div>
					</div>
					<div class="js_content" v-if="items.jsgsData.fields.length > 0">
						<div class="js_contit" v-if="items.jsgsData.children.length > 0">请选择型号：</div>
						<div class="js_model">
							<span :class="[{active:child.check},'js_model_tit']" v-for="(child,key01) in items.jsgsData.children" :key="key01" @click="checkChild(indexs,key01)">{{ child.title }}</span>
						</div>
						<div class="js_contit">请完善信息进行计算：</div>
						<div class="js_ul">
							<ul>
								<li v-for="(item, index) in items.jsgsData.fields" :key="index">
									<p>{{ item.fieldname }}:</p>

									<div class="inputdiv" v-if="item.type!='选择'">
										<input type="number" v-model="items.jsgsData.fields[index].value" 
											@input="changeValue(indexs,$event)" /><span :class="
                        items.jsgsData.fields[index].value ? 'isValue' : ''
                      ">{{ item.unit }}</span>
									</div>
									<div class="inputdiv" style="border: 0;" v-else>
										<el-select style="border: none" 
										v-model="items.jsgsData.fields[index].selectChangefield" @change="selectValue(indexs,index)">
											<el-option v-for="(ite,ind) in item.selects" :label="ite.fieldname" :value="ite.value" :key="ind" ></el-option>
										
										</el-select>
										<el-input style="width: 90px;margin-left: 10px;" v-model="items.jsgsData.fields[index].value" @input="changeValue(indexs)" v-if="item.type=='选择'&&item.showInput " 	></el-input>
										<!-- <input type="number" v-model="items.jsgsData.fields[index].value" 
											@input="changeValue($event,indexs)" /> -->
											<!-- <span :class="
                        items.jsgsData.fields[index].value ? 'isValue' : ''
                      ">{{ item.unit }}</span> -->
									</div>
								</li>
							</ul>
						</div>
						<div class="js_result" v-if="isMobileValue">
							<div class="js_result_num">
								<p class="res_tit">重量：</p>
								<p class="res_num">
									<span>{{ items.jsjieguo ? items.jsjieguo : 0 }}</span>公斤
								</p>
							</div>
							<div class="js_btns">
								<button class="btnProduct" @click="addChoose">
									<img :src="`${imgurl}icon_xuanze.png`" alt="" />
									产品选择
								</button>
                                <div class="js_r">
                                    <button @click="resetData(indexs)" v-if="!resetShow">
                                        <img :src="`${imgurl}reset_js.png`" alt="" />重置
                                    </button>
                                    <button v-else style="opacity: 0.5;">
                                        <img :src="`${imgurl}reset_js.png`" alt="" />重置 </button>
                                    <button :class="[{disable:!items.subShow},'btnChoose m10L']" @click="items.subShow ? showResult(indexs) : ''">
                                        <img :src="`${imgurl}jsq.png`" alt="" />
                                        确认计算
                                    </button>
                                </div>
								
							</div>
						</div>
						<div class="js_result" v-else>
							<div class="js_btns">
								<button class="btnProduct" @click="addChoose">
									<img :src="`${imgurl}icon_xuanze.png`" alt="" />
									产品选择
								</button>
                                <div class="js_r">
                                    <button @click="resetData(indexs)" v-if="!resetShow">
                                        <img :src="`${imgurl}reset_js.png`" alt="" />重置
                                    </button>
                                    <button v-else style="opacity: 0.5;">
                                        <img :src="`${imgurl}reset_js.png`" alt="" />重置 </button>
                                    <button :class="[{disable:!items.subShow},'btnChoose m10L']" @click="items.subShow ? showResult(indexs) : ''">
                                        <img :src="`${imgurl}jsq.png`" alt="" />
                                        确认计算
                                    </button>
                                </div>
								
							</div>
							<div class="js_result_num" v-if="items.showResult">
								<p class="res_tit">重量：</p>
								<p class="res_num">
									<span>{{ items.jsjieguo ? items.jsjieguo : 0 }}</span>公斤
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang='ts'>
    import { useSystemStore } from "@/store/modules/system";
    import { useUserStore } from "@/store/modules/user";
	const api = inject("$base", null as any);
	const imgurl = import.meta.env.VITE_APP_TITLE + "/assets/images/";
	const baseurl = inject("$baseurl", null as any);
    const base = useSystemStore();
    const useStore = useUserStore();
	const list = ref < any > ([]);
	const listField = ref([]);
	const culatorBox = ref < HTMLElement | null > (null);
	const isMobileValue = ref(false);
	const talkList = ref([]);
    const isNohistory = ref<boolean>(false);
	const keyword = ref<string>();
	const selectChangefield = ref<any>();
	watch(() => base.inSessionId, (newValue, oldValue) => {
		if (oldValue != newValue && newValue != 0) {
			talkList.value = [];
			getSessionCon();
		}
		console.log(`count 的值从 ${oldValue} 变为 ${newValue}`);
	});
	onMounted(() => {
        if(base.inSessionId == 0){
            completRecord();
			isNohistory.value = true;
        }else{
            getSessionCon();
        }
		getcalculator();
		isMobile();
	});
    function temporary() {
        base.isNewSess = false;
        let obj = [
            {
                identity: "user",
                content: '丝网计算器',
                isType : 5,
            }
        ]
        talkList.value.push(obj);
    }
    const completRecord = ()=>{
        temporary();
        let data = {
            userid : useStore.userIds,
            sessionid : base.inSessionId,
        }
        api.calculatorindex(data).then(res=>{
            base.inSessionId = res.data;
        })
    }
    const getSessionCon = ()=>{
        let data = {
            userid: useStore.userIds,
            sessionid: base.inSessionId,
            page: base.talkpage,
        }
        api.chathistorytest(data).then((res) => {
            let list = res.data;
            if(list.length ==  1 && list[0].length == 1){
                isNohistory.value = true;
            }else{
                isNohistory.value = false;
            }
            talkList.value = res.data;
            talkList.value.forEach((GropItem) => {
                GropItem.forEach((item) => {
                    if(item.identity == 'assistant'){
                        let data = JSON.parse(item.jsoncontent);
                        item.jsgsData = data.jsgsData;
                        item.jsjieguo = data.jieguo;
						if(data.xinghao){
							item.jsgsData.title = item.jsgsData.title + data.xinghao;
						}
                    }
                })
            })
			setTimeout(() => {
				if (culatorBox.value) {
					// culatorBox.value.scrollTop = culatorBox.value.scrollHeight - culatorBox.value.clientHeight;
					culatorBox.value.scrollTo({
						top: culatorBox.value.scrollHeight,
						behavior: "smooth",
					});
				}
			}, 100);

        })
    }
	const isMobile = () => {
		const userAgent = navigator.userAgent || navigator.vendor || window.opera;
		if (
			/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
				userAgent
			)
		) {
			isMobileValue.value = true;
		}
	};
	const mainData = ref([]);
	const changeData = (indexs: number, index) => {
		mainData.value[indexs].currIndex = index;
	};

	function resetData(indexs) {
		mainData.value[indexs].jsgsData.fields.forEach((element) => {
			element.value = "";
		});
		resetShow.value = true;
		mainData.value[indexs].jsjieguo = 0;
        mainData.value[indexs].subShow = false;
        mainData.value[indexs].showResult = false;

	}
    // 显示计算结果
    function showResult(index:number){
        mainData.value[index].showResult = true;
        let dataJson = {
            jsgsData : mainData.value[index].jsgsData,
            jieguo : mainData.value[index].jsjieguo,
			xinghao : mainData.value[index].xinghao,
        }
        let data = {
            userid : useStore.userIds,
            identity : 'assistant',
            content : mainData.value[index].jsjieguo,
            sessionid : base.inSessionId,
            jsoncontent : JSON.stringify(dataJson),
            isType : 5,
        }
        api.completehistoryrecord(data).then(res=>{
            edittitle(index)
        })
    }
	function edittitle(index:number){
		let title = mainData.value[index].xinghao ? mainData.value[index].jsgsData.title+mainData.value[index].xinghao : mainData.value[index].jsgsData.title;
        let data = {
            sessionid: base.inSessionId,
            title : '丝网计算器-'+title
        }
        api.editsessiontitle(data).then(res=>{
            
        })
    }
    function limitInputLength(e){
        console.log(e)
    }
	let resetShow = ref(true)
    const subShow = ref<boolean>(false);


	function changeValue1(value){
		console.log(value);
		
	}
	function changeResult(indexs){
		let jsgs = mainData.value[indexs].jsgsArr;
		const areAllTitlesEmpty = mainData.value[indexs].jsgsData.fields.every(item => !item.value || item.value === '');
		resetShow.value = areAllTitlesEmpty
		console.log(areAllTitlesEmpty);
        
        let allValuesNotNull = mainData.value[indexs].jsgsData.fields.every(item => item.value !== '');
        mainData.value[indexs].subShow = allValuesNotNull ? true : false;

		jsgs.forEach((item, index) => {
			if (item.type == 1) {
				console.log(item.name);
				mainData.value[indexs].jsgsData.fields.forEach((item2) => {
					if (item.name == item2.fieldname) {
						if (item2.value) {
							item.value = Number(item2.value);
						} else {
							item.value = 0;
						}
					}
				});
			} else if (item.type == 3) {
				item.value = Number(item.name);
			} else {
				item.value = item.name;
			}
		});
		console.log("jsgs", jsgs);

		let a = "";
		for (var i = 0; i < jsgs.length; i++) {
			a += jsgs[i].value;
		}
		console.log("jieguo", calculateExpression(a));
		mainData.value[indexs].jsjieguo = (Math.round(calculateExpression(a) * 100) / 100).toFixed(2);
		if (
			mainData.value[indexs].jsjieguo != "NaN" &&
			mainData.value[indexs].jsjieguo != "Infinity"
		) {
			mainData.value[indexs].jsjieguo = mainData.value[indexs].jsjieguo;
		} else {
			mainData.value[indexs].jsjieguo = 0;
		}
		console.log(listField.value);
	}
	function changeValue(indexs,event) {
		console.log(11111111111);
		console.log(event);

		console.log(indexs);
		if(event){
			const inputValue = event.target.value.trim();
			if(inputValue.length >  10){
				// ElMessage({
				//     message: "输入数字超过10位，请重新输入。",
				//     type: "error",
				// });
				event.target.value = inputValue.substring(0,10);
				return;
			}
		}

		changeResult(indexs);
      
		
	}

	function selectValue(indexs,index){
		console.log('----------------------------------------');

		console.log(mainData.value[indexs].jsgsData.fields[index]);
		console.log('----------------------------------------');
		
		// console.log(mainData.value[indexs].jsgsData.fields[index]);
		if(mainData.value[indexs].jsgsData.fields[index].selectChangefield==''){
			mainData.value[indexs].jsgsData.fields[index].showInput = true;

		}else{
			mainData.value[indexs].jsgsData.fields[index].showInput = false;

		}

		console.log('99999',mainData.value[indexs].jsgsData.fields[index]);
		mainData.value[indexs].jsgsData.fields[index].value = mainData.value[indexs].jsgsData.fields[index].selectChangefield


		changeResult(indexs);

	}

	function calculateExpression(expression) {
		try {
			return eval(expression);
		} catch (error) {
			console.error("表达式计算错误:", error);
			return null;
		}
	}

	function add(indexs, index: number) {
		// let newData = []
		console.log('+++++++++++++++++++++++++++++++');
		console.log( mainData.value[indexs].jsgsArr);
		console.log('+++++++++++++++++++++++++++++++');
		
		mainData.value[indexs].data[index].fields.forEach((element) => {
			element.value = "";
			if(element.type=="选择"){
				element.selectChangefield = element.selects[0].value;

			}
		});

		// mainData.value[indexs].data.forEach((item, index) => {
		//   newData.push(item)
		// })
		let wiredata = mainData.value[indexs].data[index];
		wiredata.fields.forEach(element => {
			if(element.type=="选择"){
				element.value = element.selects[0].value;
			}
		});
		mainData.value[indexs].jsgsData = wiredata;
		mainData.value[indexs].btnStatus = false;
		
		if(wiredata.children.length > 0){
			wiredata.children[0].check = true;
			mainData.value[indexs].jsgsData.formula = wiredata.children[0].formula;
			mainData.value[indexs].jsgsArr = parseExpression(
				wiredata.children[0].formula
			);
			mainData.value[indexs].jsgsData.fields = wiredata.children[0].fields;
			mainData.value[indexs].xinghao = wiredata.children[0].title;
		}else{
			mainData.value[indexs].jsgsArr = parseExpression(
				wiredata.formula
			);
		}
		console.log('--------------------------------------');

		console.log(mainData.value[indexs].jsgsData);
		console.log('--------------------------------------');

		setTimeout(() => {
			if (culatorBox.value) {
				// culatorBox.value.scrollTop = culatorBox.value.scrollHeight - culatorBox.value.clientHeight;
				culatorBox.value.scrollTo({
					top: culatorBox.value.scrollHeight,
					behavior: "smooth",
				});
			}
		}, 100);
	}
	function checkChild(indexs, index: number) {
		let wirechildren = mainData.value[indexs].jsgsData.children;
		wirechildren.forEach((item,k)=>{
			if(k == index){
				item.check = true;
			}else{
				item.check = false;
			}
		})
		mainData.value[indexs].jsgsData.formula = wirechildren[index].formula;
		mainData.value[indexs].jsgsArr = parseExpression(
			wirechildren[index].formula
		);
		mainData.value[indexs].xinghao = wirechildren[index].title;
		mainData.value[indexs].jsgsData.fields = wirechildren[index].fields;
		resetData(indexs)
	}
	// 将计算公式字符串转成数组
	function parseExpression(expression) {
		const result = [];
		let currentToken = "";

		for (let i = 0; i < expression.length; i++) {
			const char = expression.charAt(i);

			// 如果是运算符，则将其作为数组项，并且类型标识为0
			if (
				char === "+" ||
				char === "-" ||
				char === "*" ||
				char === "/" ||
				char === "(" ||
				char === ")"
			) {
				if (currentToken !== "") {
					result.push([currentToken]);
					currentToken = "";
				}
				let item = {
					name: char,
					type: 0,
				};
				result.push(item);
			}
			// 如果是汉字，则将其作为数组项，并且类型标识为1
			else if (/[\u4E00-\u9FA5]/.test(char)) {
				currentToken += char;
				let nextChar = expression.charAt(i + 1);
				// 如果下一个字符不是汉字，则将当前token作为数组项，并且类型标识为1
				if (!/[\u4E00-\u9FA5]/.test(nextChar)) {
					let item = {
						name: currentToken,
						type: 1,
					};
					result.push(item);
					currentToken = "";
				}
			} else if (/[A-Z]/.test(char)) {
				currentToken += char;
				let nextChar = expression.charAt(i + 1);
				// 如果下一个字符不是大写字母，则将当前token作为数组项，并且类型标识为2
				if (!/[A-Z]/.test(nextChar)) {
					let item = {
						name: currentToken,
						type: 1,
					};
					result.push(item);
					currentToken = "";
				}
			}
			// 如果是数字，则将其作为数组项，并且类型标识为3
			else if (/[0-9.]/.test(char)) {
				currentToken += char;
				let nextChar = expression.charAt(i + 1);
				// 如果下一个字符不是数字，则将当前token作为数组项，并且类型标识为3
				if (!/[0-9.]/.test(nextChar)) {
					let item = {
						name: currentToken,
						type: 3,
					};
					result.push(item);
					currentToken = "";
				}
			}
		}

		// 处理最后一个token
		if (currentToken !== "") {
			result.push([currentToken, 3]);
		}

		return result;
	}

	function addChoose() {
        if(isNohistory.value == false){
            isNohistory.value = true;
            mainData.value = [];
        }
        console.log('000')
		let tem = {
			data: list.value, //选择产品
			jsgsData: {}, //计算器
			jsjieguo: 0,
			jsgsArr: [],
			btnStatus: true,
			currIndex: 0,
		};
		mainData.value.push(tem);
		setTimeout(() => {
			if (culatorBox.value) {
				culatorBox.value.scrollTo({
					top: culatorBox.value.scrollHeight,
					behavior: "smooth",
				});
			}
		}, 100);
	}

	function getcalculator() {
		api.calculatorList().then((res) => {
			list.value = res.data;
			let tem = {
				data: list.value, //选择产品
				jsgsData: {}, //计算器
				jsjieguo: 0,
				jsgsArr: [],
				btnStatus: true,
				currIndex: 0,
			};
			mainData.value.push(tem);
		});
	}
	/***
	 * 搜索计算器
	 */
	function serchList(k:number){
		let newList = [];
		list.value.forEach((item) => {
			if(item.title.indexOf(keyword.value) >= 0){
				newList.push(item);
			}
		})
		if(!keyword.value){
			newList = list.value;
		}
		mainData.value[k].data = newList;
	}
</script>
<style scoped lang="scss">
    .mianBox{
        max-width:100%;
        .quesBox {
            width: 100%;
            display: flex;
            padding: 0 50px 25px 50px;
            position: relative;
            &.user {
                justify-content: end;
            }

            &.wapuser {
                justify-content: start;
            }
        }
        .userPic {
            width: 42px;
            height: 42px;
            overflow: hidden;
            border-radius: 50%;
            position: absolute;
            top: 0;

            .videoLoad {
                // width:42px;
                // height:42px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                border-radius: 50%;
                object-fit: cover;
            }

            &.user {
                border: solid 1px #82adfc;
                right: 0;
            }

            &.run {
                background: #fff;
                border: solid 1px #dfe4eb;
            }

            &.system {
                left: 0;

                &.active {
                    border: solid 1px #d4dbe4;
                    background: #fff;
                }
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .quertitle {
            font-size: 15px;
            line-height: 30px;
            color: #fff;
            background: #2379f7;
            border-radius: 8px;
            padding: 8px 25px;
            width: auto;
            max-width: 100%;
            box-shadow: 0 0 10px rgba(0, 0, 0, .05);
            cursor: pointer;
            transition: all .5s;
            font-family: 'siyuanR';
            letter-spacing: 0.75px;

            &.selected {
                // user-select: text;
                background-color: #f1f5fb;
                color: #3a6abd;
            }
            &.jsq{
                background: url(../../assets/images/icon-jsq.png) no-repeat 10px 10px #2379f7;
                background-size:auto 25px;
                padding: 8px 25px 8px 38px;

            }
        }

    }
	.sureJS {
		button {
			width: 138px;
			height: 35px;
			background: #2379f7;
			margin-top: 18px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
			color: #fff;

			img {
				margin-right: 10px;
			}
		}

		.noBtn {
			background: #999;
		}
	}

	.culatorBox {
		width: 780px;
		margin: 0 auto;
		padding: 30px 0 190px 0;
		height: 100vh;
		overflow-y: auto;
        &::-webkit-scrollbar {
            display:none;
        }
	}

	.culator {
		width: 100%;
		display: flex;
		padding: 0 50px 25px 50px;
		position: relative;

		.userPic {
			width: 42px;
			height: 42px;
			overflow: hidden;
			border-radius: 50%;
			position: absolute;
			top: 0;

			&.system {
				left: 0;

				&.active {
					border: solid 1px #d4dbe4;
					background: #fff;
				}
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}

	.counter {
		font-size: 15px;
		line-height: 30px;
		color: #3d434e;
		background: #fff;
		border-radius: 8px;
		padding: 30px;
		width: auto;
		width: 100%;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
		cursor: pointer;
		transition: all 0.5s;
		font-family: "siyuanR";

		.usetit {
			width: 100%;
			height: 40px;
			background: #f1f5fb;
			font-size: 14px;
			color: #3a6abd;
			padding: 0 15px;
			border-radius: 10px;
			line-height: 40px;
		}

		.introduce {
			font-size: 15px;
			line-height: 55px;
		}

		.wireList {
			background: #f1f5fb;
			width: 100%;
			border-radius: 10px;
			position: relative;
			overflow:hidden;
			&::before{
				content: "";
				bottom: 0;
				width: 100%;
				height: 30px;
				position: absolute;
				left: 0;
				z-index:9;
				background-image: linear-gradient(to top,rgba(241, 245, 251, 0.8), rgba(241, 245, 251, 0.4), rgba(241, 245, 251, 0.1));
			}
			.searchBox{
				height:30px;
				border:solid 1px #dbe2ee;
				width:calc(100% - 30px);
				border-radius:10px;
				margin:20px 15px 20px;
				background: url(../../assets/images/icon_search03.png) no-repeat 12px center #e6eef8;
                background-size:15px 15px;
				padding:0 60px 0 38px;
				position:relative;
				.serInput{
					width:100%;
					height:28px;
					font-size:14px;
					color:#9094b0;
					line-height:28px;
					background:none;
					outline:none;
					&::placeholder{
						color:#9094b0;
					}
				}
				.btnser{
					background:#6ca7fe;
					color:#fff;
					width:60px;
					border-radius:0 10px 10px 0;
					text-align:center;
					line-height:28px;
					position:absolute;
					right:0;
					top:0;
				}
			}
			.wireBox{
				max-height:200px;
				width:100%;
				overflow-y:auto;
				position:relative;
				padding:0 5px 10px 5px;
				
			}
			ul {
				width: 100%;
				// display: grid;
				// grid-template-columns: repeat(8, 1fr);
				li {
					padding: 0 5px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 75px;
					margin-bottom: 5px;
					width:12.5%;
					float: left;
					.imgT {
						width: 50px;
						height: 50px;
						// border: solid 1px #5f7298;
						border-radius: 5px;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.tit {
						font-size: 14px;
						white-space: nowrap;
						line-height: 25px;
					}

					&.active {
						border: solid 1px #2379f7;
						position: relative;

						&::after {
							position: absolute;
							left: 0;
							top: 0;
							content: "";
							width: 100%;
							height: 100%;
						}
					}
				}

				.curindex {
					.imgT {
						border: 3px solid #d6e4fd;
						position: relative;

						&::before {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
							background: #d6e4fd;
							content: "";
							opacity: 0.3;
						}
					}

					.tit {
						color: #3576d5;
					}
				}
			}
		}
	}

	.js-top {
		display: flex;
		align-items: center;
		width: 100%;

		.js_class_img {
			width: 57px;
			height: 57px;
			border-radius: 5px;
            border: solid 1px #5f7298;
		}

		.js_tit {
			margin-left: 10px;
			display: flex;
			flex-wrap: wrap;
			align-content: center;
			width: calc(100% - 57px);
			line-height: 15px;

			p {
				font-size: 15px;
				font-weight: bold;
				padding: 0;
				margin: 0;
			}

			span {
				display: flex;
				align-items: center;
				background: #f1f5fb;
				width: 100%;
				height: 36px;
				padding-left: 12px;
				border-radius: 5px;
				font-size: 13px;
				color: #3a6abd;
				margin-top: 6px;

				img {
					margin-right: 10px;
				}
			}
		}
	}

	.js_contit {
		font-size: 15px;
		margin-top: 15px;
	}
	.js_model{
		width: calc(100% + 20px);
		margin-left:-10px;
		margin-top:10px;
		.js_model_tit{
			background:#f1f5fb;
			color:#9094b0;
			font-size:13px;
			margin:0 10px 10px;
			height:36px;
			line-height:36px;
			padding:0 12px;
			border-radius:5px;
			display:inline-block;
			border:1px solid #f1f5fb;

			&.active{
				color:#3a6abd;
				border:1px solid #3a6abd;
			}
		}
	}
	.js_ul {
		ul {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			li {
				width: 50%;
				display: flex;
				align-items: center;

				p {
					width: 80px;
					text-align: right;
				}

				.inputdiv {
					width: calc(100% - 100px);
					display: flex;
					border: 1px solid #eef1f7;
					border-radius: 5px;
					height: 38px;
					margin-left: 10px;
					align-content: center;
					align-items: center;
					justify-content: space-between;
					padding-right: 10px;
					color: #9094b0;
					overflow: hidden;

					input {
						width: calc(100% - 35px);
						height: 38px;
						border: none;
						outline: none;
						text-align: right;
					}

					input:focus-visible {
						border: none;
					}

					.isValue {
						color: #333;
					}
				}
			}
		}
	}

	.js_result {
		
		margin: 30px 0 0;
		

		.js_btns {
			display: flex;
			width: 100%;
		    justify-content: space-between;
            align-items: center;

			button {
				width: 67px;
				height: 31px;
				background: #e9f0fa;
				border-radius: 5px;
				display: flex;
				align-items: center;
				color: #9094b0;
				justify-content: center;
                border:solid 1px #9094b0;
                
				img {
					margin-right: 5px;
				}
			}
            .js_r{
                flex:1;
                display:flex;
                align-items:center;
                justify-content:flex-end;
            }
            .btnProduct{
                width: 100px;
				margin-right: 10px;
				background: #bfdafc;
				color: #2379f7;
                cursor:pointer; 
                border:none;
            }
			.btnChoose {
				width: 100px;
				margin-right: 10px;
				background: #2379f7;
				color: #fff;
                cursor:pointer; 
                border:none;
                &.disable{
                    opacity:0.5;
                    cursor:default;
                }
			}
            .m10L{
                margin-left:10px;
            }
		}

		.js_result_num {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
            justify-content:flex-end;
            margin-top:15px;
			p {
				margin: 0;
				padding: 0;
			}

			.res_tit {
				font-size: 17px;
			}

			.res_num {
				color: #2379f7;
				display: flex;
				align-items: flex-end;
				line-height: 17px;
				font-size: 14px;

				span {
					font-family: "DIN-Bold";
					font-weight: bold;
					line-height: 26px;
					font-size: 26px;
				}
			}
		}
	}

	@media screen and (max-width: 768px) {
		.culatorBox {
			width: 100%;
		}

		.culator .userPic.system {
			left: 10px;
		}

		.culator {
			padding: 0 0 25px 60px;
		}

		.counter {
			padding: 15px;
			width: calc(100% - 30px);
		}

		.counter .introduce {
			line-height: 20px;
			margin: 10px 0;
		}

		.js_ul ul li {
			width: 100%;
		}

		.js-top .js_tit span {
			padding-left: 5px;
			line-height: 15px;
		}

		.js-top .js_tit span img {
			margin-right: 5px;
		}

		.js_result {
			flex-wrap: wrap;
			margin-top: 10px;
		}

		.js_result .js_result_num {
			margin-bottom: 10px;
			justify-content: flex-end;
			width: 100%;
		}

		.js_result .js_btns {
			width: 100%;
			justify-content: flex-end;
		}

		.counter .wireList ul {
			grid-template-columns: repeat(3, 1fr);
		}

		.js_result .js_result_num .res_num {
			justify-content: flex-end;
		}

		.js_result .js_result_num .res_num span {
			font-size: 20px;
		}
		.mianBox .quesBox{
			padding: 0 50px 25px 60px;
		}
		.mianBox .userPic.system{
			left:10px;
		}
	}
</style>